<!DOCTYPE html>
<html lang="en">
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<head>
<script type="text/javascript">
function isIE() {
  var myNav = navigator.userAgent.toLowerCase();
  return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
}
</script>
</head>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Astro</title>

    <!-- Bootstrap core CSS -->
    <link href="http://astrobill.com.my/eb/astro2/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="http://astrobill.com.my/eb/astro2/css/offcanvas.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="../../assets/js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>
    <nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="#"><img src="http://www.astro.com.my/networkstrip/img/astro-logo.png"></a>
          <!--a class="navbar-brand" href="#">Project name</a-->
        </div>
        
        <div id="navbar" class="collapse navbar-collapse">
          <!--ul class="nav navbar-nav"-->
          <ul class="list-inline">
          	<li>&nbsp;</li>
          	<li>
          		<small>
          		<address>
          		<div class="nav-text-white">
          		$name<br>
          		#foreach($add in $addList)
            	$add<br>
            	#end
            	</div>
				</address>
				</small>
          	</li>
          	<li>&nbsp;</li>
          	<li>
          		<button type="button" class="btn btn-info" onClick="window.location.href='https://selfservice.astro.com.my'">Update</button>
          	</li>
          	<li>&nbsp;</li>
			<li>
				<a href="http://www.astro.com.my" target="_blank"><img src="http://astrobill.com.my/eb/astro2/img/www32.png"class="img-responsive"></a>
			</li>
			<li>&nbsp;</li>
			<li>
 				<a href="http://www.astro.com.my/iptv" target="_blank"><img src="http://astrobill.com.my/eb/astro2/img/tv32.png" class="img-responsive"></a>
 			</li>
 			<li>&nbsp;</li>
 			<li>
 				<a href="mailto:wecare@astro.com.my?subject=Customer Care Request for Account number: 080994912-0"><img src="http://astrobill.com.my/eb/astro2/img/email32.png" class="img-responsive"></a>
 			</li>
 			<li>&nbsp;</li>
 			<li>
 				<a href="https://www.facebook.com/Astro" target="_blank"><img src="http://astrobill.com.my/eb/astro2/img/fb32.png" class="img-responsive"></a>
 			</li>
 			<li>&nbsp;</li>
 			<li>
 				<a href="https://twitter.com/astroonline" target="_blank"><img src="http://astrobill.com.my/eb/astro2/img/twit32.png" class="img-responsive"></a>
          	</li>
          	<!--
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            -->
            <li class="pull-right"><small>
          		<address>
          		<div class="nav-text-white">
          		This is your Astro bill for $month<br>
          		Account number: $accountNumber<br>
				Bill Date: $stmtDate<br>
            	Billing Period: $billingPeriod<br>
            	
            	</div>
				</address>
				</small>
</li>
          </ul>
        </div><!-- /.nav-collapse -->
      </div><!-- /.container -->
    </nav><!-- /.navbar -->

    <div class="container">

      <div class="row row-offcanvas row-offcanvas-right">

        <div class="col-xs-12 col-sm-9">
          <p class="pull-right visible-xs">
            <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
          </p>
          <!--
          <div class="jumbotron jumboimg">
            <h1>Hello, Soo Hee!</h1>
            <p>This is your Astro bill for April 2014.</p>
            <p>
            <small>
            Account number: $accountNumber<br>
        	Bill Date: $stmtDate</strong>&nbsp;&nbsp;|&nbsp;&nbsp;
            Billing Period: $billingPeriod
            </small>
            </p>
          </div>
          !-->
          <div class="row">
          <div class="tabbable"> <!-- Only required for left/right tabs -->
  					<ul class="nav nav-tabs">
    					<li class="active"><a href="#tab1" data-toggle="tab">Bill Summary</a></li>
    					<li><a href="#tab5" data-toggle="tab">Subscription Charges</a></li>
    					<li><a href="#tab3" data-toggle="tab">Rewards Summary</a></li> 
    					<li><a href="#tab4" data-toggle="tab">Survey</a></li>
  					</ul>
  
  					<div class="tab-content">
  					  	<div class="tab-pane" id="tab5">
  							<p>
  							#foreach($ProrationDetails in $lstProrationDetails) 
  							<div id="${ProrationDetails.smartCardNo}" style="min-width: 800px; max-width: 800px; height: 500px; margin: 0 auto"></div>
  							#end
  							</p>
  						</div>
    					<div class="tab-pane active" id="tab1">
      						<p>
      						<table class="table table-condensed table-responsive">
      							<thead>
      								<tr>
      									<th>Your last bill</th>
      									
      								</tr>
      							</thead>
      							<tbody>
      							<tr>
      								<td width="50%">Amount charged</td>
      								<td class="text-right" width="25%"> $previousbalance</td>
      								<td width="25%"></td>
      							</tr>
      							<tr>
      								<td>Payment</td>
      								<td class="text-right">$payment</td>
      								<td></td>
      							</tr>
      							<tr>
      								<td>Adjustments</td>
      								<td class="text-right"> $adjustments</td>
      								<td></td>
      							</tr>  
      							<tr class="danger">
      								<td class="text-error"><strong>Overdue amount</strong></td>
      								<td class="text-right"><strong>$overduecharges</strong></td>
									
									#set($temp = $overduecharges.replaceAll("[^1-9-]", ""))
									#if(!$temp.matches("[1-9]+"))
									
      								<td></td>
      								#else
      								<td class="text-error"><strong>Please pay now</strong></td>
      								#end
      							</tr>
      							</tbody>      							    							
      						</table>

      						<table class="table table-condensed">
      							<thead>
      								<tr>
      									<th>Your current bill</th>
      									
      								</tr>
      							</thead>
      							<tbody>
      							<tr>
      								<td width="50%">Outstanding balance</td>
      								<td class="text-right" width="25%"> $overduecharges</td>
      								<td width="25%"></td>
      							</tr>
      							<tr>
      								<td>Your charges this month</td>
      								<td class="text-right"> $newCharges</td>
      								<td></td>
      							</tr>
      							<tr>
      								<td><h4>Amount due</h4></td>
      								<td class="text-right"><h4> $amountdue</h4></td>
      								<td><p style="padding-top: 10px;">Please pay by <strong>$paydate</strong></p>
     	<a href="https://selfservice.astro.com.my" class="btn btn-primary btn-small">Make payment</a>
     	</td>
      							</tr>
      							</tbody>      							    							
      						</table>      						
      						</p>

      						<!-- Transaction Detail -->
      						<p>
      						<div></div>
      						<div class="table-responsive">
      						<table class="table table-condensed" id="transactionDetailsTable">
      						<thead>
      							<tr>
      								<th><small>Transaction</small></th>
      								<th><small>Period / Date</small></th>
      								<th><small>Status</small></th>
      								<th style="text-align: right;"><small>Amount (RM)</small></th>
      								<th style="width:2px;text-align: right;"><small></small></th>
      								<th style="text-align: right;"><small>GST (RM)</small></th>
     								<th style="text-align: right;"><small>Total (RM)</small></th>
     								<th style="width:2px;text-align: right;"><small></small></th>
      							</tr>
      						</thead>
      						<tbody>
      						<tr id="${transaction.smartCardNoShort}-1">
      							#foreach($Bill in $transaction.billLst)
      							#set($count2 = $velocityCount +1)
      							<tr id="${transaction.smartCardNoShort}-$count2">
      								#if($Bill.description && $Bill.description != "")
	      								<td><small>$Bill.description</small></td>
	      								<td><small>$Bill.period</small></td>
	      								<td></td>
	      								<td class="text-right"><small>$Bill.amount</small></td>
	      								<td></td>
	      								<td></td>
	      								<td></td>
	      								<td></td>
      								#end
      							</tr>
	      							#if($Bill.total && $Bill.total != "")
	      								<tr>
		      								<td></td>
		      								<td></td>
		      								<td></td>
		      								<td></td>
		      								<td></td>
		      								<td></td>
		      								<td class="text-right"><small>$Bill.total</small></td>
		      								<td></td>
	      								</tr>
	      							#end
      							#end
      							#set($count2 = $count2 + 1)
      							<tr id="${transaction.smartCardNoShort}-$count2" class="danger">
      								<td><small>Overdue charges</small></td>
      								<td></td>
      								<td></td>
      								<td></td>
      								<td></td>
      								<td></td>
      								#set($overduechargestmp = $overduecharges.replace("RM", ""))
      								<td class="text-right"><strong><small>$overduechargestmp</small></strong></td>
      								<td></td>
      							</tr>
      							
      							
      							<!-- Start Current Bill Charges -->
      							#if($currentBillList && $currentBillList.size() > 0)
      							<tr>
      								<td colspan="8"><strong><small>CURRENT BILL CHARGES </small></strong></td>
      							</tr>
      							
      							#foreach($CurrentBillCharges in $currentBillList)
      							<tr id="${CurrentBillCharges.smartCardNoShort}-1" class="active">
      								<td colspan="8"><strong><small>$CurrentBillCharges.smartCardNoShort</small></strong></td>
      							</tr>  
	      							#foreach($Bill in $CurrentBillCharges.billLst)
	      							#set($num = $velocityCount + 1)
	      							<tr id="${CurrentBillCharges.smartCardNoShort}-${num}">
	      								<td><small>$Bill.description</small></td>
	      								<td><small>$Bill.period</small></td>
	      								<td><small>$Bill.status</small></td>
	      								<td></td>
	      								<td class="text-right"><small>$Bill.amount</small></td>
	      								<td><small>$Bill.star</small></td>
	      								<td class="text-right"><small>$Bill.gstRM</small></td>
	      								<td></td>
	      								<td></td>
	      							</tr>
	      							#if($Bill.total && $Bill.total != "")
	      							<tr id="${CurrentBillCharges.smartCardNoShort}-${num}">
		      							<td></td>
		      							<td></td>
		      							<td></td>
		      							<td></td>
		      							<td></td>
		      							<td></td>
		      							<td class="text-right"><strong><small>$Bill.total</small></strong></td>
		      							<td><strong><small>$Bill.star</small></strong></td>
	      							</tr>
	      							#end
	      							#end
	      							#set($num = $num + 1)
	      							<!-- <tr id="${CurrentBillCharges.smartCardNoShort}-${num}">
		      							<td></td>
		      							<td></td>
		      							<td></td>
		      							<td></td>
		      							<td class="text-right"><strong><small>${CurrentBillCharges.total} $CurrentBillCharges.star</small></strong></td>
	      							</tr> -->
	      							
      							#end
      							#end
      							<!-- End Current Bill Charges -->
      							
      							<!-- Start Subscription Charges -->
      							#if($subscriptionList && $subscriptionList.size() > 0)
      							<tr>
      								<td colspan="8"><strong><small>SUBSCRIPTION CHANGES</small></strong></td>
      							</tr>
      							
      							#foreach($SubscriptionCharges in $subscriptionList)
      							<tr id="${CurrentBillCharges.smartCardNoShort}-1" class="active">
      								<td colspan="8"><strong><small>$SubscriptionCharges.smartCardNoShort</small></strong></td>
      							</tr>  
	      							#foreach($Bill in $SubscriptionCharges.billLst)
		      							#set($num = $velocityCount + 1)
		      							<tr id="${SubscriptionCharges.smartCardNoShort}-${num}">
		      								<td><small>$Bill.description</small></td>
		      								<td><small>$Bill.period</small></td>
		      								<td><small>$Bill.status</small></td>
		      								<td></td>
		      								<td class="text-right"><small>$Bill.amount</small></td>
		      								<td><small>$Bill.star</small></td>
		      								<td class="text-right"><small>$Bill.gstRM</small></td>
		      								<td></td>
		      								<td></td>
		      							</tr>
		      							#if($Bill.total && $Bill.total != "")
		      							<tr id="${SubscriptionCharges.smartCardNoShort}-${num}">
			      							<td></td>
			      							<td></td>
			      							<td></td>
			      							<td></td>
			      							<td></td>
			      							<td></td>
			      							<td class="text-right"><strong><small>$Bill.total</small></strong></td>
			      							<td><strong><small>$Bill.star</small></strong></td>
		      							</tr>
		      							#end
	      							#end
	      							#set($num = $num + 1)
      							#end
      							#end
      							<!-- End Subscription Bill Charges -->
      							
      							<!-- Start Fee Section -->
      							#if($feeList && $feeList.size() > 0)
      							<tr>
      								<td colspan="8"><strong><small>FEES</small></strong></td>
      							</tr>
      							
      							#foreach($Bill in $feeList)
      							#set($count2 = $velocityCount +1)
      							<tr>
      								<td><small>$Bill.description</small></td>
      								<td><small>$Bill.period</small></td>
      								<td></td>
      								<td class="text-right"><small>$Bill.amount</small></td>
      								<td></td>
      								<td></td>
      								<td></td>
      								<td></td>
      							</tr>
	      							#if($Bill.total && $Bill.total != "")
	      								<tr>
		      								<td></td>
		      								<td></td>
		      								<td></td>
		      								<td></td>
		      								<td></td>
		      								<td></td>
		      								<td class="text-right"><small>$Bill.total</small></td>
		      								<td></td>
	      								</tr>
	      							#end
      							#end
      							#end
      							<!-- End Fee Section -->
      							#if($roundTotal && $roundTotal != "")
      							<tr id="roundTotal">
      								<td><small>Round Total</small></td>
      								<td><small></small></td>
      								<td></td>
      								<td class="text-right"><small>$roundTotal</small></td>
      								<td></td>
      								<td></td>
      								<td class="text-right"><strong><small>$roundTotal</small></strong></td>
      								<td></td>
      							</tr>
      							#end
      							
      							<tr id="tax-1">
      								<td><small>Government Service Tax 6%</small></td>
      								<td><small></small></td>
      								<td></td>
      								<td></td>
      								<td></td>
      								<td></td>
      								<td class="text-right"><strong><small>${tax}</small></strong></td>
      								<td><strong><small>*</small></strong></td>
      							</tr>
      							
      							<tr id="total-1" class="info">
      								<td><strong><small>Total Charges</small></strong></td>
      								<td><small></small></td>
      								<td></td>
      								<td></td>
      								<td></td>
      								<td></td>
      								<td class="text-right"><strong><small>$totalcharge</small></strong></td>
      								<td></td>
      							</tr> 
      							     							       							       							       													     							
      						</tbody>
      						</table>
      						</div>
      						</p>
    					</div>
    					
    					
    					<div class="tab-pane" id="tab2">
      						<canvas id="b" width="750" height="350" style="border:2px solid #bbb;background:Gainsboro"></canvas>
    					</div>
    					
    					
    					<!--
    					<div class="tab-pane" id="tab2">
      						<p>
      						<div id="container" style="min-width: 500px; max-width:600px; height: 400px; margin: 0 auto" class="scrollto"></div>
      						<div class="table-responsive">
      						<table class="table table-condensed" id="transactionDetailsTable">
      						<thead>
      							<tr>
      								<th><small>Transaction</small></th>
      								<th><small>Period / Date</small></th>
      								<th><small>Status</small></th>
      								<th><small>Amount (RM)</small></th>
      								<th><small>Total (RM)</small></th>
      							</tr>
      						</thead>
      						<tbody>
      							
      							<tr id="previous-1">
      								<td><small>Previous month balance</small></td>
      								<td></td>
      								<td></td>
      								<td class="text-right"><small>254.00</small></td>
      								<td></td>
      							</tr>
      							<tr id="previous-2">
      								<td></td>
      								<td></td>
      								<td></td>
      								<td></td>
      								<td class="text-right"><small>254.00</small></td>
      							</tr>      							
      							<tr id="previous-3" class="danger">
      								<td><small>Overdue charges</small></td>
      								<td></td>
      								<td></td>
      								<td></td>
      								<td class="text-right"><small>254.00</small></td>
      							</tr>
      							 
      							<tr>
      								<td colspan="5"><strong><small>Current Bill Charges</small></strong></td>
      							</tr>
      							
      							<tr id="SMC077012345-1" class="active">
      								<td colspan="5"><strong><small>SMC077012345</small></strong></td>
      							</tr>       	
      							<tr id="SMC077012345-2">
      								<td><small>AOD</small></td>
      								<td><small>17 Apr 2014 - 16 May 2014</small></td>
      								<td></td>
      								<td class="text-right"><small>8.00</small></td>
      								<td></td>
      							</tr>
      							<tr id="SMC077012345-3">
      								<td><small>Super Pack 1</small></td>
      								<td><small>17 Apr 2014 - 16 May 2014</small></td>
      								<td></td>
      								<td class="text-right"><small>133.00</small></td>
      								<td></td>
      							</tr>
      							<tr id="SMC077012345-4">
      								<td><small></small></td>
      								<td><small></small></td>
      								<td></td>
      								<td><small></small></td>
      								<td class="text-right"><small>141.00</small></td>
      							</tr>
      							
      							
      							<tr id="SMC077012346-1" class="active">
      								<td colspan="5"><strong><small>SMC077012346</small></strong></td>
      							</tr>       	
      							<tr id="SMC077012346-2">
      								<td><small>Super Pack 2</small></td>
      								<td><small>17 Apr 2014 - 16 May 2014</small></td>
      								<td></td>
      								<td class="text-right"><small>50.00</small></td>
      								<td></td>
      							</tr>
      							<tr id="SMC077012346-3">
      								<td><small>Super Pack 3</small></td>
      								<td><small>17 Apr 2014 - 16 May 2014</small></td>
      								<td></td>
      								<td class="text-right"><small>50.00</small></td>
      								<td></td>
      							</tr>
      							<tr id="SMC077012346-4">
      								<td><small>AOTG</small></td>
      								<td><small>17 Apr 2014 - 16 May 2014</small></td>
      								<td></td>
      								<td class="text-right"><small>13.00</small></td>
      								<td></td>
      							</tr>      							
      							<tr id="SMC077012346-5">
      								<td><small></small></td>
      								<td><small></small></td>
      								<td></td>
      								<td><small></small></td>
      								<td class="text-right"><small>113.00</small></td>
      							</tr>    
      													       							
      							<tr id="tax-1">
      								<td><small>Government Service Tax 6%</small></td>
      								<td><small></small></td>
      								<td></td>
      								<td></td>
      								<td class="text-right"><small>15.24</small></td>
      							</tr>
      							
      							<tr id="total-1" class="info">
      								<td><strong><small>Total Charges</small></strong></td>
      								<td><small></small></td>
      								<td></td>
      								<td></td>
      								<td class="text-right"><strong><small>523.24</small></strong></td>
      							</tr> 
      							     							       							       							       													     							
      						</tbody>
      						</table>
      						</div>
      						</p>
    					</div>
    					-->
    					
    					<div class="tab-pane" id="tab3">
    						<p>
    						<div id="waterFall" style="min-width: 500px; max-width: 600px; height: 400px; margin: 0 auto"></div>
    						</br>
    						<p>
    						<div class="table-responsive">
    						<table class="table table-condensed table-striped">
    						<tbody>
    						<tr>
    						  <td><strong>Previous balance</strong></td>
    						  <td class="text-right">${rewardSum.previousBalance}</td>
    						</tr>
    						<tr>
    						  <td><strong>Points earned</strong></td>
    						  <td class="text-right">${rewardSum.pointsEarned}</td>
    						</tr>
    						<tr>
    						  <td><strong>Points redeemed</strong></td>
    						  <td class="text-right">${rewardSum.pointsRedeemed}</td>
    						</tr>
    						<tr>
    						  <td><strong>Total new balance</strong></td>
    						  <td class="text-right">${rewardSum.totalNewBalance}</td>
    						</tr>
    						<tr>
    						  <td><strong>Expiry month</strong></td>
    						  <td class="text-right">${rewardSum.expiryMonthDisplay}</td>
    						</tr>
    						<tr>
    						  <td><strong>Expiry points</strong></td>
    						  <td class="text-right">${rewardSum.expiryPoints}</td>
    						</tr>  
    						</tbody>
    						</table>
    						</div>
    						</p>
    						</p>
    					</div>
    					
    					<div class="tab-pane" id="tab4">
    					  <p>
    					  <form id="surveyForm" role="form" method="post" action="mailto:bmd_bill@astro.com.my?subject=Survey Feedback for billingportal.astro.com.my">
  							<div class="form-group">
    							<label for="q1" class="control-label">1. What's your first reaction to this new service idea?</label>
								<div class="radio">
									<label>
										<input type="radio" name="question1" id="Verypositive" value="Very positive">
										Very positive
									</label>
								</div>
								<div class="radio">
									<label>
										<input type="radio" name="question1" id="Somewhatpositive" value="Somewhat positive">
										Somewhat positive
									</label>
								</div>
								<div class="radio">
									<label>
										<input type="radio" name="question1" id="Neutral" value="Neutral">
										Neutral
									</label>
								</div>
								<div class="radio">
									<label>
										<input type="radio" name="question1" id="Somewhatnegative" value="Somewhat negative">
										Somewhat negative
									</label>
								</div>
								<div class="radio">
									<label>
										<input type="radio" name="question1" id="Verynegative" value="Very negative">
										Very negative
									</label>
								</div>
  							</div>
  							<div class="form-group">
    							<label for="q2" class="control-label">2. How well, if at all, does the word "INNOVATIVE" describe this new service?</label>
								<div class="radio">
									<label>
										<input type="radio" name="question2" id="Extremelywell" value="Extremely well">
										Extremely well
									</label>
								</div>
								<div class="radio">
									<label>
										<input type="radio" name="question2" id="Verywell" value="Very well">
										Very well
									</label>
								</div>
								<div class="radio">
									<label>
										<input type="radio" name="question2" id="Moderatelywell" value="Moderately well">
										Moderately well
									</label>
								</div>
								<div class="radio">
									<label>
										<input type="radio" name="question2" id="Slightlywell" value="Slightly well">
										Slightly well
									</label>
								</div>
								<div class="radio">
									<label>
										<input type="radio" name="question2" id="Notatallwell" value="Not at all well">
										Not at all well
									</label>
								</div>
  							</div>
  							<div class="form-group">
    							<label for="q2" class="control-label">3. How well, if at all, do the words "HIGH QUALITY" describe this new service?</label>
								<div class="radio">
									<label>
										<input type="radio" name="question3" id="Extremelywell" value="Extremely well">
										Extremely well
									</label>
								</div>
								<div class="radio">
									<label>
										<input type="radio" name="question3" id="Verywell" value="Very well">
										Very well
									</label>
								</div>
								<div class="radio">
									<label>
										<input type="radio" name="question3" id="Moderatelywell" value="Moderately well">
										Moderately well
									</label>
								</div>
								<div class="radio">
									<label>
										<input type="radio" name="question3" id="Slightlywell" value="Slightly well">
										Slightly well
									</label>
								</div>
								<div class="radio">
									<label>
										<input type="radio" name="question3" id="Notatallwell" value="Not at all well">
										Not at all well
									</label>
								</div>
  							</div>
  							<div class="form-group">
    							<label for="q2" class="control-label">4. How often, if ever, do you currently use other, similar services?</label>
								<div class="radio">
									<label>
										<input type="radio" name="question4" id="Extremelyoften" value="Extremely often">
										Extremely often
									</label>
								</div>
								<div class="radio">
									<label>
										<input type="radio" name="question4" id="Veryoften" value="Very often">
										Very often
									</label>
								</div>
								<div class="radio">
									<label>
										<input type="radio" name="question4" id="Moderatelyoften" value="Moderately often">
										Moderately often
									</label>
								</div>
								<div class="radio">
									<label>
										<input type="radio" name="question4" id="Slightlyoften" value="Slightlyoften">
										Slightly often
									</label>
								</div>
								<div class="radio">
									<label>
										<input type="radio" name="question4" id="Notatalloften" value="Not at all often">
										Not at all often
									</label>
								</div>
  							</div>
  							<div class="form-group">
    							<label for="q2" class="control-label">5. If this service were available today, how likely would you be to use this service?</label>
								<div class="radio">
									<label>
										<input type="radio" name="question5" id="Extremelylikely" value="Extremely likely">
										Extremely likely
									</label>
								</div>
								<div class="radio">
									<label>
										<input type="radio" name="question5" id="Verylikely" value="Very likely">
										Very likely
									</label>
								</div>
								<div class="radio">
									<label>
										<input type="radio" name="question5" id="Moderatelylikely" value="Moderately likely">
										Moderately likely
									</label>
								</div>
								<div class="radio">
									<label>
										<input type="radio" name="question5" id="Slightlylikely" value="Slightly likely">
										Slightly likely
									</label>
								</div>
								<div class="radio">
									<label>
										<input type="radio" name="question5" id="Notatalllikely" value="Not at all likely">
										Not at all likely
									</label>
								</div>
  							</div>
  							<div class="form-group">
  								<label for="exampleInputSatifaction1" class="control-label">
  								6. How likely is it that you would recommend our new service to a friend or colleague? (1=Not at all likely, 10=Extremely likely)</label>
  								<p>
  								<label class="radio-inline">
  									<input type="radio" name="question6" id="1" value="1"> 1
  								</label>
								<label class="radio-inline">
  									<input type="radio" name="question6" id="2" value="2"> 2
  								</label>
								<label class="radio-inline">	
  									<input type="radio" name="question6" id="3" value="3"> 3
  								</label>
								<label class="radio-inline">	
  									<input type="radio" name="question6" id="4" value="4"> 4
  								</label>
								<label class="radio-inline">	
  									<input type="radio" name="question6" id="5" value="5"> 5
								</label>
								<label class="radio-inline">
  									<input type="radio" name="question6" id="6" value="6"> 6
  								</label>
								<label class="radio-inline">
  									<input type="radio" name="question6" id="7" value="7"> 7
  								</label>
								<label class="radio-inline">	
  									<input type="radio" name="question6" id="8" value="8"> 8
  								</label>
								<label class="radio-inline">	
  									<input type="radio" name="question6" id="9" value="9"> 9
  								</label>
								<label class="radio-inline">	
  									<input type="radio" name="question6" id="10" value="10"> 10
								</label>	
								</p>															
  							</div>
  							<div class="form-group">
    							<label for="q2" class="control-label">7. When you think about this new service, do you think of it as something people might NEED or as something people might WANT?</label>
								<div class="radio">
									<label>
										<input type="radio" name="question7" id="Need" value="Need">
										Need
									</label>
								</div>
								<div class="radio">
									<label>
										<input type="radio" name="question7" id="Want" value="Want">
										Want
									</label>
								</div>
								<div class="radio">
									<label>
										<input type="radio" name="question7" id="Bothequally" value="Both equally">
										Both equally
									</label>
								</div>
  							</div>
  							<div class="form-group">
    							<label for="q2" class="control-label">8. When you're considering new services in this area, what are the top two things you generally consider? (Check two boxes.)</label>
								<div class="checkbox">
									<label>
										<input type="checkbox" name="question8" id="Price" value="Price">
										Price
									</label>
								</div>
								<div class="checkbox">
									<label>
										<input type="checkbox" name="question8" id="Brand" value="Brand">
										Brand
									</label>
								</div>
								<div class="checkbox">
									<label>
										<input type="checkbox" name="question8" id="Innovation" value="Innovation">
										Innovation
									</label>
								</div>
								<div class="checkbox">
									<label>
										<input type="checkbox" name="question8" id="Quality" value="Quality">
										Quality
									</label>
								</div>
								<div class="checkbox">
									<label>
										<input type="checkbox" name="question8" id="Value" value="Value">
										Value
									</label>
								</div>
								<div class="checkbox">
									<label>
										<input type="checkbox" name="question8" id="Others" value="Others">
										Others
									</label>
								</div>
  							</div>
  							<div class="form-group">
  								<label for="exampleInputOtherComments" class="control-label">9. In your own words, what are the things that you like most about this new service?</label>
  								<textarea name="question9"  class="form-control" rows="3"></textarea>
  							</div>
  							<div class="form-group">
  								<label for="exampleInputOtherComments" class="control-label">10. In your own words, what are the things that you would most like to improve in this new service?</label>
  								<textarea name="question10" class="form-control" rows="3"></textarea>
  							</div>
  							<p id="surveyMsg" style="display:none ; color: red;">* Please complete the survey!</p>
  							<button type="submit" class="btn btn-primary">Submit</button>
						  </form>
    					  </p>
    					</div>
  					</div>
		  </div>		
          	
          </div><!--/row-->
        </div><!--/.col-xs-12.col-sm-9-->

        <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
          <ul class="list-group">
          	<li class="list-group-item active"><h5>Useful Links</h5></li>
          	<li class="list-group-item"><a href="https://selfservice.astro.com.my">Login to my account</a></li>
          	<li class="list-group-item"><a href="#">Help</a></li>
          	<li class="list-group-item active"><h5>This month's promotions</h5></li>
          	<li class="list-group-item"><a href="#"><img src="http://www.astro.com.my/portal/images/autodebit_rm30_thumbnail.jpg"></a></li>
          	<li class="list-group-item"><a href="#"><img src="http://www.astro.com.my/portal/images/relocation_tumb.jpg"></a></li>
          	<li class="list-group-item"><a href="#"><img src="http://www.astro.com.my/packagepromo/images/Alist-thumbnail.jpg"></a></li>
          	
          </ul>
        </div><!--/.sidebar-offcanvas-->
      </div><!--/row-->

      <hr>

      <footer>
        <p>&copy; MEASAT Broadcast Network Systems Sdn Bhd 2014 | <abbr title="Telephone">Tel:</abbr> <a href="tel:0395433838">03-9543-3838</a> | <abbr title="Facisimile">Fax:</abbr> 03-9543 7333</p>
      </footer>

    </div><!--/.container-->
    
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://astrobill.com.my/eb/astro2/js/bootstrap.min.js"></script>

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>

    <script src="http://astrobill.com.my/eb/astro2/js/offcanvas.js"></script>
    
    <!-- HighCharts -->
	<script src="http://code.highcharts.com/highcharts.js"></script>
	<script src="http://code.highcharts.com/highcharts-more.js"></script>
	<script src="http://code.highcharts.com/modules/exporting.js"></script>
	<script src="http://code.highcharts.com/modules/data.js"></script>
	<script src="http://code.highcharts.com/modules/drilldown.js"></script>

	 <script type="text/javascript">
	    $(document).ready(function(){
		    $("body") .css({'padding-top': (($('.navbar-fixed-top').height()) + 15 ) + 'px'});
		    $(window).resize(function(){
		        $("body") .css({'padding-top': (($('.navbar-fixed-top').height()) + 15 )+'px'});
			});
		    
		    var checkingObjs = ["question1", "question2", "question3", "question4", "question5", "question6", "question7", "question8"];
			$("#surveyForm" ).submit(function( event ) {
		    	  event.preventDefault();
		    	  
		    	  $('#surveyMsg').hide();		    	  
		    	  var isValid = true;
		    	  for(index = 0; index < checkingObjs.length; index++) {
					   var obj = $('input:checked[name=' + checkingObjs[index] + ']');
					   isValid = obj && obj.val() ? true : false;
					   if (!isValid) {
					   		$('#surveyMsg').show();
					   		return;
					   }
				  }
		    	  
		    	  this.submit();
		    });
		});
	</script>
	
	<script>
/*
$(function () {
    $('#pieChart').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: 1,//null,
            plotShadow: false
        },
        title: {
            text: 'Current Bill Charges, April 2014'
        },
        tooltip: {
            pointFormat: '{series.name}: <br/><b>RM {point.y:.2f}</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>:<br/>RM {point.y:.2f}',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'Current Bill Charges',
            data: [
            	['AOD', 8.00],
            	['Super Pack 1', 133.00],
            	['Super Pack 2', 133.00],
            	['Super Pack 3', 155.00],
                ['Super Pack 4',   155.00],
                ['IPTV',       148.00],
                ['AOTG + Catch up TV', 10.00],
                ['Government Service Tax 6%', 44.52]
            ]
        }]
    });
});	
*/

function addClass(element, classToAdd) {
    var currentClassValue = element.className;
     
    if (currentClassValue.indexOf(classToAdd) == -1) {
        if ((currentClassValue == null) || (currentClassValue === "")) {
            element.className = classToAdd;
        } else {
            element.className += " " + classToAdd;
        }
    }
}
     
function removeClass(element, classToRemove) {
    var currentClassValue = element.className;
     
    // removing a class value when there is more than one class value present
    // and the class you want to remove is not the first one
    if (currentClassValue.indexOf(" " + classToRemove) != -1) {
        element.className = element.className.replace(" " + classToRemove, "");
        return;
    }
     
    // removing the first class value when there is more than one class
    // value present
    if (currentClassValue.indexOf(classToRemove + " ") != -1) {
        element.className = element.className.replace(classToRemove + " ", "");
        return;
    }
     
    // removing the first class value when there is only one class value 
    // present
    if (currentClassValue.indexOf(classToRemove) != -1) {
        element.className = element.className.replace(classToRemove, "");
        return;
    }
}



$(function () {
    $('#waterFall').highcharts({
        chart: {
            type: 'waterfall'
        },

        title: {
            text: 'Rewards Summary'
        },

        xAxis: {
            type: 'category'
        },

        yAxis: {
            title: {
                text: 'Rewards Points'
            }
        },

        legend: {
            enabled: false
        },

        tooltip: {
            pointFormat: '<b>{point.y}</b> Rewards Points'
        },

        series: [{
            upColor: Highcharts.getOptions().colors[2],
            color: Highcharts.getOptions().colors[3],
            data: [{
                name: 'Previous Balance',
                y: ${rewardSum.previousBalance}
            }, {
                name: 'Points Earned',
                y: ${rewardSum.pointsEarned}
            }, {
                name: 'Balance',
                isIntermediateSum: true,
                color: Highcharts.getOptions().colors[1]
            }, {
                name: 'Points Redeemed',
                y: -${rewardSum.pointsRedeemed}
            }, {
                name: 'Total New Balance',
                isSum: true,
                color: Highcharts.getOptions().colors[1]
            }],
            dataLabels: {
                enabled: true,
                formatter: function () {
                    return Highcharts.numberFormat(this.y, 0, ',');
                },
                style: {
                    color: '#FFFFFF',
                    fontWeight: 'bold',
                    textShadow: '0px 0px 3px black'
                }
            },
            pointPadding: 0
        }]
    });
});


$(function () {
    // Create the chart
    $('#container').highcharts({
        chart: {
            type: 'pie',
            events: {
            	drilldown: function (e) {
            		#foreach($CurrentBillCharges in $genChartList)
            		#set($count = $velocityCount )
            		#if($velocityCount == 1)
            		if (e.point.name == "${CurrentBillCharges.smartCardNoShort}") {
            			#foreach($CurrentBillCharges in $genChartList)
            				#if($count != $velocityCount)
            					#foreach($Bill in $CurrentBillCharges.billLst)
            						#if($velocityCount == 1)
            							addClass(document.querySelector("#${CurrentBillCharges.smartCardNoShort}-1"), "hidden");
            						#end
            					#set($num = $velocityCount + 1)	
            					addClass(document.querySelector("#${CurrentBillCharges.smartCardNoShort}-$num"), "hidden");
            					#end
            					#set($num = $num + 1)		
            					addClass(document.querySelector("#${CurrentBillCharges.smartCardNoShort}-$num"), "hidden");
            				#end
            				#end

            			addClass(document.querySelector("#tax-1"), "hidden");
            			addClass(document.querySelector("#total-1"), "hidden");
            		}
            		#else
            			else if (e.point.name == "${CurrentBillCharges.smartCardNoShort}") {
                			
                			#foreach($CurrentBillCharges in $genChartList)
                				#if($count != $velocityCount) 
                					#foreach($Bill in $CurrentBillCharges.billLst) 
                						#if($velocityCount == 1)
                							addClass(document.querySelector("#${CurrentBillCharges.smartCardNoShort}-1"), "hidden");
                						#end 
                					#set($num = $velocityCount + 1)	
                					addClass(document.querySelector("#${CurrentBillCharges.smartCardNoShort}-$num"), "hidden");
                					#end 
                					#set($num = $num + 1)		
                    				addClass(document.querySelector("#${CurrentBillCharges.smartCardNoShort}-$num"), "hidden");
                				#end 
                				#end 

                			addClass(document.querySelector("#tax-1"), "hidden");
                			addClass(document.querySelector("#total-1"), "hidden");
                		}
            		#end 
            		#end
            		
            		 else if (e.point.name == "Government Service Tax") {
            			 #foreach($CurrentBillCharges in $genChartList)
             			#foreach($Bill in $CurrentBillCharges.billLst)
             				#if($velocityCount == 1)
             					addClass(document.querySelector("#${CurrentBillCharges.smartCardNoShort}-1"), "hidden");
             				#end
             				#set($num = $velocityCount + 1)	
             				addClass(document.querySelector("#${CurrentBillCharges.smartCardNoShort}-$num"), "hidden");
         				#end
         				#set($num = $num + 1)		
    					addClass(document.querySelector("#${CurrentBillCharges.smartCardNoShort}-$num"), "hidden");
            			#end
            			addClass(document.querySelector("#total-1"), "hidden");
            		}
            	},
            	drillup: function (e) {
            		#foreach($CurrentBillCharges in $genChartList)
            			#foreach($Bill in $CurrentBillCharges.billLst)
            				#if($velocityCount == 1)
            					removeClass(document.querySelector("#${CurrentBillCharges.smartCardNoShort}-1"), "hidden");
            				#end
            				#set($num = $velocityCount + 1)	
            				removeClass(document.querySelector("#${CurrentBillCharges.smartCardNoShort}-$num"), "hidden");
        				#end
        				#set($num = $num + 1)		
    					removeClass(document.querySelector("#${CurrentBillCharges.smartCardNoShort}-$num"), "hidden");
           			#end
  						removeClass(document.querySelector("#tax-1"), "hidden");
            			removeClass(document.querySelector("#total-1"), "hidden"); 
            	}
            }
        },
        title: {
            text: 'Current Bill Charges, $month'
        },
        subtitle: {
            text: 'Click the slices to view detailed breakdown.'
        },
        plotOptions: {
            series: {
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>:<br/>RM{point.y:.2f}'
                }
            }
        },

        tooltip: {
            headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
            pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>RM{point.y:.2f}</b><br/>'
        },

        series: [{
            name: 'Summary',
            colorByPoint: true,
            data: [
            #foreach($CurrentBillCharges in $genChartList)
            {
				name: '${CurrentBillCharges.smartCardNoShort}',
				y: $CurrentBillCharges.total,
				drilldown: '${CurrentBillCharges.smartCardNoShort}'
			},
			#end
			{
				name: 'Government Service Tax',
				y: $tax,
				drilldown: 'tax'
			}]
        }],
        
        drilldown: {
            
    series: [
       #foreach($CurrentBillCharges in $genChartList)    
    {
        id: '${CurrentBillCharges.smartCardNoShort}',
        name: '${CurrentBillCharges.smartCardNoShort}',
        data: [
        	
        #foreach($Bill in $CurrentBillCharges.billLst)
        
            ['${Bill.description}', $Bill.amount],
        #end
        ]
    },
       #end
       {
       	id: 'tax',
       	name: 'Government Service Tax',
       	data: [
       		['Government Service Tax', $tax]
       	]
       }
    ]
            
        }
    });
});
</script>
<script>
var b_canvas = document.getElementById("b");
if(isIE() && isIE () < 9){
	b_canvas= G_vmlCanvasManager.initElement(b_canvas);
}
var context = b_canvas.getContext("2d");
#set ($positionBar = 20)
#set ($positionName = 40)
#foreach($ProrationDetails in $lstProrationDetails)
//base line
context.strokeStyle = 'black';
context.beginPath();
context.moveTo(25, 300);
context.lineTo(625, 300);
context.stroke();

//write date
context.font = 'bold 14px sans-serif';
context.textBaseline = 'bottom';
#foreach($date in $ProrationDetails.lstDate)
	context.fillText('${date}', 25 + 250* ($velocityCount -1), 325);
#end
//draw vertical line
context.strokeStyle = 'green';
context.lineWidth=0.5;
context.beginPath();
//context.setLineDash([10,5]);
context.moveTo(300, 25);
context.lineTo(300, 300);
context.stroke();

//vertical line desc
context.fillStyle = 'green';
context.fillText('Upgrade', 280, 20);

	#set($startPositionBar = $positionBar)
	#set($startPositionName = $positionName)
	#foreach($Bill in $ProrationDetails.lstSubscriptionChanges)
		#set ($positionBar = $velocityCount*30 + $startPositionBar)
		#set ($positionName = $velocityCount*30 + $startPositionName)
		//draw boxes
		//box1
		#set($temp = $Bill.amount.replaceAll("[0-9 .]",""))
		#if($temp.matches("^-"))
			context.fillStyle = '#FFE4C4';
		#else
			context.fillStyle = '#9ACD32';
		#end
		context.fillRect(275, $positionBar , 50, 25);
		context.fillStyle = 'black';
		context.textAlign="end";
		context.fillText('${Bill.description}', 260, $positionName );
		
		//box1 amount
		context.fillStyle="white";
		context.fillRect(625, $positionBar ,100,25);
		context.fillStyle="black";
		context.textAlign="end";
		context.fillText('RM${Bill.amount}', 720, $positionName );
	#end // end of foreach($Bill in $ProrationDetails.lstSubscriptionChanges)
	#set($startPositionBar = $positionBar )
	#set($startPositionName = $positionName )
	#foreach($Bill in $ProrationDetails.lstCurrentBillCharges)
		
		#set($positionBar = $startPositionBar + ($velocityCount +1)*30)
		#set ($positionName = $startPositionName + ($velocityCount +1)*30)
		context.fillStyle = 'Purple';
		context.fillRect(305, $positionBar, 300, 25);
		context.fillStyle = 'black';
		context.textAlign="end";
		context.fillText('$Bill.description', 290, $positionName);
		
		context.fillStyle="white";
		context.fillRect(625,$positionBar,100,25);
		context.fillStyle="black";
		context.textAlign="end";
		context.fillText('RM${Bill.amount}', 720, $positionName);
	
	#end // end foreach($Bill in $ProrationDetails.lstCurrentBillCharges)
		
	context.fillStyle="white";
	context.fillRect(625,$positionBar + 30,100,25);
	context.fillStyle="black";
	context.textAlign="end";
	context.fillText('RM${ProrationDetails.totalAdjustment}', 720, $positionName + 30);
	context.fillText('Total', 600, $positionName + 30);
	
#end //end of for each lstProrationDetails

#foreach($ProrationDetails in $lstProrationDetails) 
$(function () {

    $('#${ProrationDetails.smartCardNo}').highcharts({

        chart: {
            type: 'columnrange',
            inverted: true
        },

        title: {
            text: '${ProrationDetails.smartCardNo}'
        },

        subtitle: {
            text: ''
        },

		labels: {
        	items: [{
        		html: 'Previous cycle',
        		style: {
        			color: 'black',
        			left: '10px',
        			top: '400px',
        			fontWeight: 'bold'
        		}
        	}, {
        		html: 'Current cycle',
        		style: {
        			color: 'black',
        			left: '500px',
        			top: '400px',
        			fontWeight: 'bold'
        		}
        	}]
        },

        xAxis: {
        	categories:[
        	           		#foreach($Bill in $ProrationDetails.lstSubscriptionChanges) 
        	            		'$Bill.description $Bill.amount',
        	            	#end
    	           		#foreach($Bill in $ProrationDetails.lstCurrentBillCharges) 
    	            		'$Bill.description $Bill.amount',
    	            	#end
        	            ],
            lineWidth: 0,
            tickLength: 0,
            labels: {
            	enabled: true
            }
        },

        yAxis: {
            title: {
                text: ''
            },
            lineColor: 'black',
            lineWidth: 1,
            
 //           min: Date.UTC($startDate),
 //           max: Date.UTC($endDate),
            type: "datetime",
            tickInterval: 24 * 3600 * 1000,
            tickPositions: [

            				#foreach($date in $ProrationDetails.lstDate)
            				Date.UTC($date),
            				#end
            			
            				
                        ],
            labels: {
            	 rotation: -45,
            	formatter: function() {
            		return Highcharts.dateFormat('%e-%b-%y', this.value);
            	}
            },
            gridLineColor: '#ffffff',
            gridLineWidth: 0,
            
            plotLines: [#foreach($Bill in $ProrationDetails.lstStatusAndDate)
                        {
            	color: #if($Bill.status == "Reconnect") 'green', #elseif($Bill.status == "Suspend") 'red', #elseif($Bill.status == "Upgrade") 'blue', #end
            	width: 1,
            	zIndex: 2,
            	value: Date.UTC($Bill.startDate),   
            	label: {
                	text: '$Bill.status',
                	verticalAlign: 'top',
                	align: #if($Bill.status == "Reconnect") 'left', #elseif($Bill.status == "Suspend") 'right', #elseif($Bill.status == "Upgrade") 'left', #end
                	rotation: 0,
                	style: {
                    	color: #if($Bill.status == "Reconnect") 'green', #elseif($Bill.status == "Suspend") 'red', #elseif($Bill.status == "Upgrade") 'blue', #end
                    	fontWeight: 'bold'
                	}
             	}
        	},
        	#end
            ],
            plotBands: [
                        #foreach($date in $ProrationDetails.lstDate)
        				#set($Count = $velocityCount - 1)
        				#end
            {
            	from: Date.UTC($ProrationDetails.lstDate.get($0)),
            	to: Date.UTC($ProrationDetails.lstDate.get($2)),
            	color: '#FFC0CB',
            	label: {
            		
            		textAlign: 'center',
            		verticalAlign: 'bottom'
            	}
            },
            {
            	from: Date.UTC($ProrationDetails.lstDate.get($2)),
            	to: Date.UTC($ProrationDetails.lstDate.get($$Count)),
            	color: '#FFE4E1',
            	label: {
            		
            		textAlign: 'center',
            		verticalAlign: 'bottom'
            	}
            }
            
            ],
            
            
        },

        tooltip: {
            valueSuffix: '',
            enbleHTML: true,
            formatter: function() {
            	return '<b>' + this.point.name + '</b>';
            }
        },
        
        plotOptions: {
            columnrange: {
                dataLabels: {
                    enabled: false,
                    formatter: function () {
                        return this.y;
                    }
                }
            }
        },

        legend: {
            enabled: false
        },
        series: [{
            name: 'Charges',
           // colorByPoint: true,
            data: [#foreach($Bill in $ProrationDetails.lstSubscriptionChanges) 
                   {
            	id: '$Bill.description',
            	name: '$Bill.description $Bill.amount',
        		#set($temp = $Bill.amount.replaceAll("[0-9 .]",""))
        		#if($temp.matches("^-"))
        			color: '#13FE06',
        		#else
        			color: '#FE0686',
        		#end
            	low: Date.UTC($Bill.startDate),
            	high: Date.UTC($Bill.endDate)
            }, 
            #end
            
       		#foreach($Bill in $ProrationDetails.lstCurrentBillCharges) 
         		  {
    				id: '$Bill.description',
    				name: '$Bill.description $Bill.amount',
    				color: '#F20FC9',
    				low: Date.UTC($Bill.startDate),
    				high: Date.UTC($Bill.endDate)
   				 }, 
   			 #end
   				 ]
        }]
    });
});
#end
</script>
</body>
</html>

